TreeGrid Cells Tutorial
1. Edits - Inputs and Multiline
Basic editable cells for direct editing in input or textarea
-
Basic information
- all cell types and attribute groups
TreeGrid supports these cell types:
- Inputs:
Text single line string, Lines multiline string, Int integer number, Float decimal number, Date date and / or time.
- Combos:
Select simple combo, Enum extended combo.
- Checkboxes:
Bool checkbox, Radio radio buttons.
- Buttons:
Button action button, tab or combo, Panel more control buttons.
- Html:
Html any HTML code, Icon simple image, Img extended image, Link extended link, List repeating HTML, Abs absolutely positioned HTML tags in one cell.
- Special:
Gantt Gantt chart, Chart line chart, DropCols dragged column names.
Every type has various settings, basically done by Format and EditFormat attribute, but many types have their own special attributes to control their functionality.
There are also attributes that can be used for most types to extend their functionality:
-
All types: Button right side button, Icon left side icon, Link clickable link, Tip text shown on mouse hover, ShowHint cell shows its whole content on mouse hover, Menu right click popup menu.
-
Editable types: Defaults popup list to choose predefined value for the cell, Suggest popup list of suggested value for given input, EmptyValue HTML shown when the cell value is empty, Range more values in one cell.
-
Validation: EditMask validation during editing, ResultMask validation after finish editing.
- Span:
RowSpan rowspan, Span colspan, Merge more spanned values in one cell.
- Style:
Class CSS class for the cell, ClassInner added CSS class to the content, Color computed background color, Background exact background color, Cursor mouse cursor, Wrap wrapping to more lines,
Align horizontal alignment, Rotate 90,180,270 degrees, HtmlPrefix HTML before cell content, HtmlPostfix HTML after cell content.
All the cell attributes like Type, Format, EditFormat, Enum, Range, Button, ... can be set to whole column in <C> tag (e.g. <C Name='Cols1' Type='Int'/>) or to individual cell in <I> tag with column prefix (e.g. <I Col1Type='Int'/>).
The cell value and any cell attribute except spanning can be dynamically calculated by Formula.
-
API for cells
-
The Type, Format and EditFormat values can be changed or generated dynamically by API events OnGetType and OnGetFormat.
-
The resulted HTML shown in the cell can be changed or generated dynamically by API event OnGetHtmlValue.
-
The cell value can be read by API methods GetString or GetValue and set by SetString or SetValue.
-
To catch a change of the cell value can be used API events OnValueChanged, OnAfterValueChanged, OnEndEdit and XML event OnChange.
-
Any cell attribute can be read by API global function Get or by method GetAttribute. Many cell attributes can be changed by method SetAttribute.
-
The row or cell content can be updated by RefreshRow or RefreshCell methods. The cell DOM tag can be got by GetCell method, but the DOM content should be used only as read-only.
-
Text
type shows plain editable text in one line, without any special input / output rules.
It preserves all white space.
It is default cell type.
The text display can be formatted by Format - the text can be converted to lower or upper case, can be replaced by given RegExp expression and can append some prefix and postfix.
The decimal and group separators can be changed by <Lang><Format DecimalSeparator='.' GroupSeparator=','/></Lang>.
-
Float
and Int
types. Show formatted numbers. Int is for integer numbers, Float is for decimal point numbers, but the only difference between them is that Int does not accept decimal separator in editing.
The number format for display is set by Format attribute, it specifies required count of digits, required and maximal count of decimal places, displaying group separator, minus sign, exponential notation, percentage.
-
Date
type shows date, time or date and time.
For date it supports calendar dialog to pick up the date, more dates or date range(s).
To hide calendar button for time, set Button="".
The date or time format is specified by Format attribute, the format for editing by EditFormat.
If the EditFormat contains time part, calendar dialog will let you edit also time.
The Date can show also more dates or times or date ranges (set by Range='1').
If set, the calendar dialog will let you select more dates or date range.
The Format attribute has similar syntax as ASP.NET ToString method, it can contain also HTML code.
Date values in input / output XML can be in count of milliseconds since 1/1/1970 or in string in English format (M/d/yyyy or yyyy-MM-dd or d.M.yyyy + HH:mm:ss), for output format see DateStrings attribute.
-
Pass
type is simple text input as password that does not display the input characters. Remember, the password is sent to server not coded.
-
Lines
type is multiline text, automatically or manually wrapped by CRLF. To not automatically wrap the text set Wrap='0'.
LF (new line) can be put into XML by 
. By default key enter finishes editing, to let users to insert LF by Enter key, set AcceptEnters='1', the editing will be finished by Ctrl+Enter or Shift+Enter.
You can specify maximal row height in pixels by MaxHeight attribute. The higher cells will be overflowed. It affects only multiline cells.